<template>
  <el-popover
    placement="top"
    effect="dark"
    title=""
    v-model:visible="showEmoji"
    popper-class="emoji-warpper"
    :show-arrow="false"
    :width="client === 'PC' ? 385 : '95%'"
    trigger="click"
  >
    <template #reference>
      <div
        class="action cursor-pointer"
        @mouseover="isHovered = true"
        @mouseleave="isHovered = false"
      >
        <Icon v-if="isHovered" icon="shocked" :size="18" colorful />
        <Icon v-else icon="happy1" :size="18" colorful />
        <span class="ml-1">表情</span>
      </div>
    </template>
    <div class="emoji-panel">
      <div class="emoji-panel-content">
        <ul class="emoji-list">
          <li
            class="emoji-item"
            v-for="(emoji, $index) of emojis"
            :key="$index"
            v-login="() => insertEmoji(emoji)"
          >
            {{ emoji }}
          </li>
        </ul>
      </div>
    </div>
  </el-popover>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { judgeClient } from '@/utils/detectDevice'
import { emojis } from './constant'

const client = judgeClient()
const showEmoji = ref(false)
const isHovered = ref(false)

const $emit = defineEmits(['select'])

// 插入表情
const insertEmoji = (emoji: string) => {
  $emit('select', emoji)
}
</script>

<style lang="scss" scoped>
.emoji-warpper {
  padding: 4px !important;
  padding-top: 8px !important;
  color: var(--font-main) !important;
  background-color: var(--background-wrapper) !important;
  border: none !important;
}

.emoji-panel {
  display: flex;
  flex-direction: column;

  .footer {
    display: flex;
    align-items: center;
    padding: 4px 6px 0;
    margin-top: 4px;
    border-top: 1px solid var(--background-2);

    &-act {
      padding: 4px;
      margin-right: 8px;
      line-height: 18px;
      border-radius: 6px;
    }

    .active {
      background-color: var(--background-3);
    }
  }

  &-content {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    height: 220px;
    overflow-y: auto;

    .item {
      position: relative;
      width: 60px;
      height: 60px;
      margin: 7px;
      cursor: pointer;
      border-radius: 6px;

      .del {
        position: absolute;
        top: 0;
        right: 2px;
        font-weight: 500;
        color: #f54e4e;
        cursor: pointer;
      }

      img {
        width: 100%;
        height: 100%;
        vertical-align: bottom;
        border-radius: 2px;
      }

      &:hover {
        box-shadow: var(--el-box-shadow-light);
      }
    }

    .item-add {
      width: 60px;
      height: 60px;
      margin: 7px;
      line-height: 58px;
      text-align: center;
      border: 1px solid #fff;
      border-radius: 6px;
    }
  }
}

.emoji-list {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  word-wrap: break-word;
  list-style-type: none;
}

.emoji-item {
  width: 28px;
  height: 28px;
  padding-top: 3px;
  padding-left: 2px;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  border-radius: 4px;

  &:hover {
    background-color: var(--background-3);
  }
}

.icon-lock {
  margin-right: 4px;
}
</style>
